<template>
  <div>
    <el-tabs v-model="activeName" type="border-card" class="marginTop">
      <el-tab-pane label="vue3" name="1">
        <Shiki :code="mdArr[27]" lang="sh" />
        <Shiki :code="mdArr[1]" lang="sh" class="marginTop" />
      </el-tab-pane>
      <el-tab-pane label="element-plus" name="2">
        <Shiki code="npm install element-plus --save" lang="sh" />
        <h4>main.ts</h4>
        <Shiki :code="mdArr[3]" lang="ts" class="marginTop" />
      </el-tab-pane>
      <el-tab-pane label="js-cookie" name="3">
        <Shiki :code="mdArr[5]" lang="sh" />
        <h4>use</h4>
        <Shiki :code="mdArr[7]" lang="ts" class="marginTop" />
      </el-tab-pane>
      <el-tab-pane label="svg" name="4">
        <Shiki code="npm i vite-plugin-svg-icons -D" lang="sh" />
        <h4>use</h4>
        <Shiki :code="mdArr[23]" lang="ts" class="marginTop" />
        <h4>vite.config.ts</h4>
        <Shiki :code="mdArr[11]" lang="ts" class="marginTop" />
        <h4>SvgIcon.vue</h4>
        <Shiki :code="SvgIcon" lang="html" class="marginTop" />
        <h4>main.ts</h4>
        <Shiki :code="mdArr[9]" lang="ts" class="marginTop" />
      </el-tab-pane>
      <el-tab-pane label="screenfull" name="5">
        <Shiki code="npm install screenfull" lang="sh" />
        <h4>use</h4>
        <Shiki :code="mdArr[13]" lang="ts" class="marginTop" />
      </el-tab-pane>
      <el-tab-pane label="componentName" name="6">
        <Shiki code="npm i vite-plugin-vue-setup-extend -D" lang="sh" />
        <h4>use</h4>
        <Shiki :code="mdArr[17]" lang="vue" class="marginTop" />
        <h4>vite.config.ts</h4>
        <Shiki :code="mdArr[15]" lang="ts" class="marginTop" />
      </el-tab-pane>
      <el-tab-pane label="codeView" name="7">
        <Shiki code="npm install -D shiki" lang="sh" />
        <h4>use</h4>
        <Shiki :code="mdArr[25]" lang="vue" class="marginTop" />
        <h4>main.css</h4>
        <Shiki :code="mdArr[19]" lang="css" class="marginTop" />
        <h4>shiki.ts</h4>
        <Shiki :code="shikiTS" lang="ts" class="marginTop" />
        <h4>shiki.vue</h4>
        <Shiki :code="shikiVue" lang="vue" class="marginTop" />
      </el-tab-pane>
      <el-tab-pane label="jsonView" name="8">
        <Shiki code="npm install vue-json-pretty --save" lang="sh" />
        <h4>use</h4>
        <Shiki :code="mdArr[21]" lang="vue" class="marginTop" />
        <h4>jsonPrtty.vue</h4>
        <Shiki :code="pretty" lang="vue" class="marginTop" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup lang="ts" name="npm">
import { ref } from 'vue';
import SvgIcon from '@/views/icons/SvgIcon.vue?raw'
import shikiTS from '@/components/Shiki/shiki.ts?raw'
import shikiVue from '@/components/Shiki/index.vue?raw'
import pretty from '@/components/json/pretty.vue?raw'

import md from './index.md?raw'
const mdArr = md.split('```\n')

const activeName = ref('7')
</script>
